{% extends "common/base.htm" %}

{% block title %} 首页 - {{site_name}} {% end %}
{% block style %}
<style type="text/css">
</style>
{% end %}
{% block header %}
{% include "common/header.htm" %}
{% end %}

{% block body %}
  <!-- content -->
  <div class="content">
    <div class="title">
      {%raw index_welcome['value']%}
    </div>
    <div class="layui-carousel imgbox"  id="index_banner">
      <div carousel-item  class="imgH">
        {%for banner in index_banner %}
        <div><a href="{{banner.link}}" title="{{banner.title}}" target="_blank">
          <img style="width: 100%; height: 500px;" src="{{banner.img}}">
        </a></div>
        {% end %}
      </div>
    </div>
    <div class="prod-show">
      <div class="layui-fluid">
        <div class="row layui-col-space12 layui-clear">
          {%for square in index_square %}
          <div class="layui-col-xs6 layui-col-sm6 layui-col-md3">
            <div class="img-txt">
              {% if square.img %}
              <img style="width: 100%;" src="{{square.img}}" alt="{{square.title}}">
              {% end %}
              <h3>{{square.title}}</h3>
            </div>
          </div>
          {% end %}
        </div>
      </div>
    </div>
    <div class="prod-descr">
      <div class="layui-fluid">
        {%for gd in index_goods %}
        <div class="layui-row">
          <div class="item layui-clear">
            <div class="layui-col-xs12 layui-col-sm5 layui-col-md5">
              <div style="width: 480px !important; height: 480px !important;display: block !important;">
                <a href="/case/{{gd.id}}">
                  <img src="{{gd.thumb['left']}}" class="left-img" style="max-width: 480px; max-height: 480px;">
                </a>
              </div>
            </div>
            <div class="layui-col-xs12 layui-col-sm7 layui-col-md7">
              <div class="text">
                <h3>{{gd.title}}</h3>
                <p>{{gd.description}} <a href="/case/{{gd.id}}">查看更多 ></a></p>
              </div>
            </div>
            <div class="layui-col-xs12 layui-col-sm12 layui-col-md8 bot-img-box">
              <div class="bot-img">
                <img src="{{gd.thumb['right']}}" style="max-width: 780px; max-height: 400px;">
              </div>
            </div>
          </div>
        </div>
        {% end %}
      </div>
    </div>
    <div class="Partner">
      <div class="title">
        <h3>合作伙伴</h3>
        <h4>cooperative partner</h4>
      </div>
      <div class="cont-box">
        <div class="layui-fluid">
          <div class="row layui-col-space20">
            {% for fl in friendlinks%}
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md2">
              <a href="{{fl.url}}" target="{{fl.target}}" title="{{fl.title}}">
                <img src="{{fl.logo}}" width="180">
                {{ fl.title }}
            </a>
            </div>
            {% end %}
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md2">
              <h2>LOGO</h2>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- end-content -->
{% end %}

{% block footer %}
    {% include "common/footer.htm" %}
{% end %}

{% block javascript %}
<script type="text/javascript">
  layui.use(['carousel','jquery','element'],function(){
    var carousel = layui.carousel,$ = layui.$
    //建造实例
    carousel.render({
      elem: '#index_banner'
      ,width: '100%' //设置容器宽度
      ,arrow: 'always'
      ,height:'auto'
      //,anim: 'updown' //切换动画方式
    })
    $('.app-header-menuicon').on('click',function(){
      $('.header-down-nav').toggleClass('down-nav')
    })
    var imgH = $('.imgbox div.layui-this').outerHeight();
    $('.imgH').css('height',imgH+'px')
    window.onresize = function () {
      var imgH = $('.imgbox div.layui-this').outerHeight();
      $('.imgH').css('height',imgH+'px')
    }
  })
  </script>
{% end %}
